<script setup lang="ts">
import { reactive, onMounted, ref } from "vue";
import ReCol from "@/components/ReCol";
import ProfitChart from "./components/ProfitChart.vue";
import ProfitRankingChart from "./components/ProfitRankingChart.vue";
import SystemProfitChart from "./components/SystemProfitChart.vue";
import ServiceProfitPieChart from "./components/ServiceProfitPieChart.vue";
import ServiceProfitRankingChart from "./components/ServiceProfitRankingChart.vue";
import CountryProfitChart from "./components/CountryProfitChart.vue";
import CountryProfitRankingChart from "./components/CountryProfitRankingChart.vue";
import AllChat from "./components/AllChat.vue";
import {
  getTotalProfitStats,
  getProfitUsersStats,
  getServiceTypeProfitStats,
  getUserProfitRanking,
  getServiceProfitRanking,
  getProfitCountriesStats,
  getCountriesProfitRanking
} from "@/api/adminProfitApi";
import dayjs from "dayjs";
defineOptions({
  name: "ProfitChat"
});
const timeUnitOptions = [
  {
    label: "月",
    value: "month"
  },
  {
    label: "年",
    value: "year"
  },
  {
    label: "日",
    value: "day"
  },
  {
    label: "周",
    value: "week"
  }
];

const defaultTime = [
  dayjs().startOf("month").format("YYYY-MM-DD"),
  dayjs().endOf("month").format("YYYY-MM-DD")
];

const form1 = reactive({
  time: defaultTime
});
const form1Data = ref({
  totalCost: 0,
  totalDiscount: 0,
  totalProfit: 0,
  totalSales: 0,
  totalTasks: 0
});
const qyeryTotalProfitStats = async () => {
  const { time } = form1;
  const params = {
    startDate: time[0],
    endDate: time[1]
  };
  const { data } = await getTotalProfitStats(params);
  form1Data.value = data;
};
const form2 = reactive({
  timeUnit: "month",
  time: defaultTime
});
const form2Data = ref([]);
const qyeryProfitUsersStats = async () => {
  const { time, timeUnit } = form2;
  const params = {
    startDate: time[0],
    endDate: time[1],
    timeUnit,
    page: 1,
    size: 10
  };
  const { data } = await getProfitUsersStats(params);
  form2Data.value = data.data;
};
const form3 = reactive({
  timeUnit: "month",
  time: defaultTime
});
const form3Data = ref([]);
const qyeryServiceTypeProfitStats = async () => {
  const { time, timeUnit } = form3;
  const params = {
    startDate: time[0],
    endDate: time[1],
    timeUnit,
    page: 1,
    size: 10
  };
  const { data } = await getServiceTypeProfitStats(params);
  form3Data.value = data.data;
};
const form4 = reactive({
  time: defaultTime
});
const form4Data = ref([]);
const qyeryUserProfitRanking = async () => {
  const { time } = form4;
  const params = {
    startDate: time[0],
    endDate: time[1],
    page: 1,
    size: 10
  };
  const { data } = await getUserProfitRanking(params);
  form4Data.value = data;
};
const form5 = reactive({
  time: defaultTime
});
const form5Data = ref([]);
const qyeryServiceProfitRanking = async () => {
  const { time } = form5;
  const params = {
    startDate: time[0],
    endDate: time[1],
    page: 1,
    size: 10
  };
  const { data } = await getServiceProfitRanking(params);
  form5Data.value = data.ranking;
};
const form6 = reactive({
  time: defaultTime,
  timeUnit: "month"
});
const form6Data = ref([]);
const qyeryProfitCountriesStats = async () => {
  const { time, timeUnit } = form6;
  const params = {
    timeUnit,
    startDate: time[0],
    endDate: time[1],
    page: 1,
    size: 10
  };
  const { data } = await getProfitCountriesStats(params);
  form6Data.value = data.data;
};
const form7 = reactive({
  time: defaultTime
});
const form7Data = ref([]);
const qyeryCountriesProfitRanking = async () => {
  const { time } = form7;
  const params = {
    startDate: time[0],
    endDate: time[1],
    page: 1,
    size: 10
  };
  const { data } = await getCountriesProfitRanking(params);
  form7Data.value = data.data;
};
onMounted(() => {
  qyeryTotalProfitStats();
  qyeryProfitUsersStats();
  qyeryServiceTypeProfitStats();
  qyeryUserProfitRanking();
  qyeryServiceProfitRanking();
  qyeryProfitCountriesStats();
  qyeryCountriesProfitRanking();
});
</script>

<template>
  <div>
    <div class="flex justify-between items-center bg-white p-4">
      <span class="text-md font-medium">收益统计数据</span>
      <div class="serch-box flex align-center gap-3">
        <el-date-picker
          v-model="form1.time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
          value-format="YYYY-MM-DD"
          class="!w-[200px]"
          @change="
            val => {
              if (!val) {
                form1.time = defaultTime;
              }
              qyeryTotalProfitStats();
            }
          "
        />
      </div>
    </div>
    <el-row class="mb-[18px]">
      <re-col
        v-motion
        :value="24"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400
          }
        }"
      >
        <el-card shadow="never">
          <div class="chat-title">总收益统计数据</div>
          <AllChat :data="form1Data" />
        </el-card>
      </re-col>
    </el-row>
    <el-row :gutter="24">
      <re-col
        v-motion
        class="mb-[18px]"
        :value="8"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 480
          }
        }"
      >
        <el-card class="bar-card" shadow="never">
          <div class="flex justify-between items-center">
            <span class="text-md font-medium">各个用户的收益统计数据</span>
            <div class="serch-box flex align-center gap-3">
              <el-date-picker
                v-model="form2.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
                value-format="YYYY-MM-DD"
                class="!w-[200px]"
                @change="
                  val => {
                    if (!val) {
                      form2.time = defaultTime;
                    }
                    qyeryProfitUsersStats();
                  }
                "
              />

              <el-select
                v-model="form2.timeUnit"
                placeholder="请选择"
                clearable
                class="!w-[80px]"
                size="small"
                @change="qyeryProfitUsersStats"
              >
                <el-option
                  v-for="item in timeUnitOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </div>
          </div>
          <div class="flex justify-between items-start mt-3">
            <ProfitChart :data="form2Data" />
          </div>
        </el-card>
      </re-col>

      <re-col
        v-motion
        class="mb-[18px]"
        :value="8"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 560
          }
        }"
      >
        <el-card shadow="never">
          <div class="flex justify-between items-center">
            <span class="text-md font-medium">各服务类型的收益统计数据</span>
            <div class="serch-box flex align-center gap-3">
              <el-date-picker
                v-model="form3.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
                value-format="YYYY-MM-DD"
                class="!w-[200px]"
                @change="
                  val => {
                    if (!val) {
                      form3.time = defaultTime;
                    }
                    qyeryServiceTypeProfitStats();
                  }
                "
              />

              <el-select
                v-model="form3.timeUnit"
                placeholder="请选择"
                clearable
                class="!w-[80px]"
                size="small"
                @change="qyeryServiceTypeProfitStats"
              >
                <el-option
                  v-for="item in timeUnitOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </div>
          </div>
          <div class="flex justify-between items-start mt-3">
            <ServiceProfitPieChart :data="form3Data" />
          </div>
        </el-card>
      </re-col>
      <re-col
        v-motion
        class="mb-[18px]"
        :value="8"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 640
          }
        }"
      >
        <el-card shadow="never">
          <div class="flex justify-between items-center">
            <span class="text-md font-medium">各国家的收益统计数据</span>
            <div class="serch-box flex align-center gap-3">
              <el-date-picker
                v-model="form6.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
                value-format="YYYY-MM-DD"
                class="!w-[200px]"
                @change="
                  val => {
                    if (!val) {
                      form6.time = defaultTime;
                    }
                    qyeryProfitCountriesStats();
                  }
                "
              />

              <el-select
                v-model="form6.timeUnit"
                placeholder="请选择"
                clearable
                class="!w-[80px]"
                size="small"
                @change="qyeryProfitCountriesStats"
              >
                <el-option
                  v-for="item in timeUnitOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </div>
          </div>
          <div class="flex justify-between items-start mt-3">
            <CountryProfitChart :data="form6Data" />
          </div>
        </el-card>
      </re-col>

      <re-col
        v-motion
        class="mb-[18px]"
        :value="8"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 560
          }
        }"
      >
        <el-card shadow="never">
          <div class="flex justify-between items-center">
            <span class="text-md font-medium">用户的收益排名数据</span>
            <div class="serch-box flex align-center">
              <el-date-picker
                v-model="form4.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
                value-format="YYYY-MM-DD"
                class="!w-[200px]"
                @change="
                  val => {
                    if (!val) {
                      form4.time = defaultTime;
                    }
                    qyeryUserProfitRanking();
                  }
                "
              />
            </div>
          </div>
          <div class="flex justify-between items-start mt-3">
            <ProfitRankingChart :data="form4Data" />
          </div>
        </el-card>
      </re-col>

      <re-col
        v-motion
        class="mb-[18px]"
        :value="8"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 640
          }
        }"
      >
        <el-card shadow="never">
          <div class="flex justify-between items-center">
            <span class="text-md font-medium">各服务类型的收益排名数据</span>
            <div class="serch-box flex align-center">
              <el-date-picker
                v-model="form5.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
                value-format="YYYY-MM-DD"
                class="!w-[200px]"
                @change="
                  val => {
                    if (!val) {
                      form5.time = defaultTime;
                    }
                    qyeryServiceProfitRanking();
                  }
                "
              />
            </div>
          </div>
          <div class="flex justify-between items-start mt-3">
            <ServiceProfitRankingChart :data="form5Data" />
          </div>
        </el-card>
      </re-col>

      <re-col
        v-motion
        class="mb-[18px]"
        :value="8"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 640
          }
        }"
      >
        <el-card shadow="never">
          <div class="flex justify-between items-center">
            <span class="text-md font-medium">各国家的收益排名数据</span>
            <div class="serch-box flex align-center gap-3">
              <el-date-picker
                v-model="form7.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
                value-format="YYYY-MM-DD"
                class="!w-[200px]"
                @change="
                  val => {
                    if (!val) {
                      form7.time = defaultTime;
                    }
                    qyeryCountriesProfitRanking();
                  }
                "
              />
            </div>
          </div>
          <div class="flex justify-between items-start mt-3">
            <CountryProfitRankingChart :data="form7Data" />
          </div>
        </el-card>
      </re-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.chat-title {
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}
:deep(.el-card) {
  --el-card-border-color: none;
}

.main-content {
  margin: 20px 20px 0 !important;
}
</style>
